<template>
	<view class="content">
		<uni-row class="demo-uni-row" >
			<uni-col :span="5">
				<view :class="{item:true,achieve:currentMenuid === menu.id}" @click="doshow(menu.id)" v-for="menu in menuData" >
					{{menu.name}}
				</view>
			</uni-col>
			<uni-col class="goods" :span="19">
				<view class="good" v-for="i in tableData">
					<image :src="i.imgUrl" />
					<view class="word">
						<view class="inform">
							<view >
								<text class="name">{{i.name}}</text>
							</view>
							<view class="content3">
								<text>{{i.content}}</text>
							</view>
							<view class="price">
								<text >￥{{i.price}}</text>
							</view>
						</view>
						<view class="button1">
							<button  @click="doShowDetails(i.id)">
								<uni-icons  class="icon" type="plusempty" size="20"  ></uni-icons>
							</button>
						</view >
						
					</view>
				</view>
			</uni-col>
		</uni-row>
	</view>
	
</template>

<script setup>
import { ref,onMounted } from 'vue';

// 菜单
const menuData = ref([])
const query = () => {
		//网络请求
		uni.request({
			url: "http://wtp.qywy.cc/categories",
			success: (res) => {
				menuData.value = res.data
				currentMenuid.value = menuData.value[0].id
				queryGoodsByid(currentMenuid.value)
				
			}
		});
		
	}
onMounted(()=>{
  query()
  
})
const currentMenuid = ref("")
const doshow = (id)=>{
	currentMenuid.value = id
	queryGoodsByid(id)
}

//商品
//根据类别的编号查询

const tableData = ref([])
const queryGoodsByid =(id)=>{
		uni.request({
			url: `http://wtp.qywy.cc/goods?categoryId=${id}`,
			success: (res) => {
				tableData.value =res.data;
				
			}
		});
		
	}
// const queryGoodsByid=(id)=>{
// 	fetch(`http://localhost:3000/goods?categoryId=${id}`,{
// 	    method:'get'
// 	}).then(response=>response.json()).then((data)=>{
// 		tableData.value = data
// 	})
// }
//展示商品信息
const doShowDetails = (id)=>{
	uni.navigateTo({
		url:`/pages/details/details?id=${id}`
	});
}


</script>

<style scoped>
	.content{
		height: 80vh;
	}
	.item{
		height: 60px;
		background-color:ghostwhite;
		color: grey;
		display: flex;
		font-size: 20rpx;
		justify-content: center;
		align-items: center;
		border-radius:0px 10px 10px 0px;
	}
	.achieve{
		background-color: white;
		color: cadetblue;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.good{
		width: 600rpx;
		height: 300rpx;
		margin: 10rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20px;
		
	
	}
	.good image{
		width:200rpx ;
		height:250rpx ;
		/* padding-top: 20px; */
		border-radius: 10px;
		
	}
	.word{
		width: 200px;
		display: flex;
		flex-direction: row;
		
	}
	.inform{
		width: 200px;
	}
	.name{
		font-size: 20px;
		margin-left: 10px;
		font-weight: bold;
	}
	.price{
		margin-top: 50px;
	}
	.price text{
		font-size: 18px;
		color: brown;
		margin-left: 10px;
		padding-top: 60px;
	}
	.button1 button{
		height: 30px;
		width: 30px;
		background-color: orange;
		margin-top: 100px;
		text-align: right;
	}	
	.icon{
		display: flex; 
		justify-content: center;
		margin-top: -10px; 
	}
	.content3{
		margin-top: 10px;
	}
	.content3 text{
		font-size: 10px;
		color: orange;
		margin-left: 20px;
	}
</style>




